<template>
    <div class="socket-container">
        <el-row>
            <el-input type="textarea" :rows="4" placeholder="input notify information here..." v-model="message"/>
            <el-button type="primary" @click="sendAdminInfo">Send</el-button>
            <el-button type="info" @click="cryptoBtn">crypto</el-button>
        </el-row>

        <el-card id="conversation" class="box-card message-record">
            <div slot="header">
                <span>历史记录</span>
            </div>
            <div v-for="message in messageList">
                <div style="font-size: 14px">
                    <span>通知人：{{message.sender }}</span>
                    <el-divider direction="vertical"></el-divider>
                    <span>{{message.sendDate | dateFormatAll}}</span>
                </div>
                <el-alert
                    style="margin-bottom: 10px;margin-top: 10px"
                    :title="message.message"
                    :closable="false">
                </el-alert>
            </div>
        </el-card>
    </div>
</template>

<script>
    import {stompClient} from "../../utils/websocket";
    import {getAllAdminNotifies} from "../../api/websocket";
    import {SecretUtil} from "../../utils/secret";
    import {demo} from "../../api/demo";

    export default {
        name: "WebSocketIndex",
        data() {
            return{
                username: '',
                message: '',
                messageList: []        // 消息列表
            }
        },
        created() {
            this.loadAllAdminNotifies()
            this.username = window.localStorage.getItem(window.localStorage.getItem("ww-token"))
        },
        methods: {
            // 加载所有的后台通知记录
            loadAllAdminNotifies() {
                getAllAdminNotifies().then(res => {
                    this.messageList = res.data.data
                })
            },
            sendAdminInfo() {
                if(!this.message){
                    this.$message.error("通知内容不能为空")
                }else{
                    stompClient.send("/send/admin/notify", {}, JSON.stringify({'sender': this.username,'message': this.message}))
                    this.message = ''
                    this.loadAllAdminNotifies()
                }
            },
            cryptoBtn() {
                const data = {
                    'uid': '6666',
                    'username': '加密',
                    'nickname': '解密',
                    'password': '6666'
                }
                const encryptStr = SecretUtil.aesEncrypt(JSON.stringify(data))
                const decryptStr = SecretUtil.aesDecrypt(encryptStr)
                demo({'encryptData': encryptStr}).then(res => {
                })
            }
        }
    }
</script>

<style scoped>
    .message-record{
        max-height: 400px;
        overflow: auto;
    }
</style>
